import React, { useState } from 'react';
import { Card } from 'antd';
import { ResultItem } from '../../../../../shared/types';
import NumberField from '../../../../components/common/NumberField';
import TextField from '../../../../components/common/TextField';
import StatefulCalculationCard from '../../../../components/common/StatefulCalculationCard';
import ExportData from '../../../../components/common/ExportCalculateData';
import { CloudOutlined } from '@ant-design/icons';

// 表单类型定义
interface WaterFlowFormValues {
  F: number;          // 汇水面积(km²)
  k_3: number;        // 植被及土壤影响系数
  J: number;          // 河道平均坡降(‰)
  n: number;          // 暴雨递减指数
  zone: number;       // 水文气象分区
  H6: number;         // 6小时点暴雨量(mm)
  H24: number;        // 24小时点暴雨量(mm)
  dumpSiteName: string; // 渣场名称
}

// 后端返回数据类型
interface WaterFlowResult {
  '洪峰流量'?: { Q: number };
  '综合影响系数'?: { K: number; k_0: number; k_3: number };
  '暴雨指数'?: { beta: number };
  '造峰影响雨量'?: { H_T: number };
  '面雨量'?: { HFt: number };
  '造峰历时'?: { T: number };
  '设计历时'?: { t: number | string };
  '汇水面积影响系数'?: { K1: number };
  '坡降影响系数'?: { K2: number };
  '点面系数'?: { alpha_12: number; alpha_24: number };
}

const WaterFlowCalculationPage: React.FC = () => {
  // 初始值配置
  const initialValues: WaterFlowFormValues = {
    F: 20,          // 汇水面积(km²)
    k_3: 0.98,      // 植被及土壤影响系数
    J: 5.0,         // 河道平均坡降(‰)
    n: 0.65,        // 暴雨递减指数
    zone: 7,        // 水文气象分区
    H6: 70.0,       // 6小时点暴雨量(mm)
    H24: 101.0,     // 24小时点暴雨量(mm)
    dumpSiteName: '' // 渣场名称，默认为空
  };
  
  const resultFormatter = (data: WaterFlowResult & { dumpSiteName?: string }): ResultItem[] => {
    const Q = data['洪峰流量']?.Q;
    const K = data['综合影响系数']?.K;
    const beta = data['暴雨指数']?.beta;
    const H_T = data['造峰影响雨量']?.H_T;
    const HFt = data['面雨量']?.HFt;
    const T_peak = data['造峰历时']?.T;
    const t_design = data['设计历时']?.t;
    const k0 = data['综合影响系数']?.k_0;
    const k3 = data['综合影响系数']?.k_3;
    const K1 = data['汇水面积影响系数']?.K1;
    const K2 = data['坡降影响系数']?.K2;
    const alpha12 = data['点面系数']?.alpha_12;
    const alpha24 = data['点面系数']?.alpha_24;
    // 渣场名称会从表单值中获取并注入到data中
    const dumpSiteName = data.dumpSiteName || '';

    return [
      { key: 'maxFlow', name: '最大流量 Q', value: typeof Q === 'number' ? Q.toFixed(4) : '-', unit: 'm³/s' },
      { key: 'compositeFactor', name: '综合影响系数 K', value: typeof K === 'number' ? K.toFixed(4) : '-', unit: '' },
      { key: 'rainfallIndex', name: '暴雨指数 β', value: typeof beta === 'number' ? beta.toFixed(4) : '-', unit: '' },
      { key: 'peakRainfall', name: '造峰影响雨量 H_T', value: typeof H_T === 'number' ? H_T.toFixed(4) : '-', unit: 'mm' },
      { key: 'areaRainfall', name: '面雨量 HFt', value: typeof HFt === 'number' ? HFt.toFixed(4) : '-', unit: 'mm' },
      { key: 'peakDuration', name: '造峰历时 T', value: typeof T_peak === 'number' ? T_peak.toFixed(2) : '-', unit: 'h' },
      { key: 'designDuration', name: '设计历时 t', value: typeof t_design === 'number' ? t_design.toString() : (typeof t_design === 'string' ? t_design : '-'), unit: 'h' },
      { key: 'k0', name: 'k₀', value: typeof k0 === 'number' ? k0.toFixed(4) : '-', unit: '' },
      { key: 'k3', name: 'k₃', value: typeof k3 === 'number' ? k3.toFixed(4) : '-', unit: '' },
      { key: 'areaFactor', name: '汇水面积影响系数 K1', value: typeof K1 === 'number' ? K1.toFixed(4) : '-', unit: '' },
      { key: 'slopeFactor', name: '坡降影响系数 K2', value: typeof K2 === 'number' ? K2.toFixed(4) : '-', unit: '' },
      { key: 'alpha12', name: '点面系数 α₁₂', value: typeof alpha12 === 'number' ? alpha12.toFixed(6) : '-', unit: '' },
      { key: 'alpha24', name: '点面系数 α₂₄', value: typeof alpha24 === 'number' ? alpha24.toFixed(6) : '-', unit: '' },
      { key: 'dumpSiteName', name: '渣场名称', value: dumpSiteName || '-', unit: '' },
    ];
  };
  
  // 表单字段渲染函数
  const renderFormFields = () => (
    <>
      <NumberField name="F" label="汇水面积F (km²)" min={0} step={0.0001} />
      <NumberField name="k_3" label="植被及土壤影响系数 k_3" min={0} step={0.0001} />
      <NumberField name="J" label="河道平均坡降 J (‰)" min={0} step={0.0001} />
      <NumberField name="n" label="暴雨递减指数 n" min={0} step={0.0001} />
      <NumberField name="zone" label="水文气象分区" min={0} step={1} tooltip="请输入分区编号 (7,8,10,5)" />
      <NumberField name="H6" label="6小时点暴雨量 H6 (mm)" min={0} step={0.0001} />
      <NumberField name="H24" label="24小时点暴雨量 H24 (mm)" min={0} step={0.0001} />
      <TextField name="dumpSiteName" label="渣场名称" required placeholder="请输入渣场名称" />
    </>
  );
  
  return (
    <Card title={<><CloudOutlined style={{ marginRight: 8 }} /> 降雨流量计算</>}>
      <StatefulCalculationCard
        title="降雨流量计算"
        formKey="waterFlowForm"
        initialValues={initialValues}
        renderFormFields={renderFormFields}
        calculationType="all-rainfall"
        resultFormatter={resultFormatter}
        columnCount={1}
        tableHeight={800}
      />
    </Card>
  );
};

export default WaterFlowCalculationPage;